<template>
	<view class="container">
		<view class="title">问题描述</view>
		<view class="tui-cells">
			<textarea class="tui-textarea" placeholder="请输入" maxlength="500" placeholder-class="phcolor" v-model="desc" />
			<view class="textarea-counter">{{ descNum }}/500</view>
		</view>
		<view class="feedback-img">
			<image v-if="!imgUrl" class="img-icon" @click="choosePic" src="/static/images/my/upload-icon.png"></image>
			<view v-else class="img-list">
				<view class="img-item">
					<image @click="showPic" class="img" :src="imgUrl"></image>
					<image class="del" @click="deleteHandle" v-if="!loading" src="/static/images/my/close.png"></image>
					<view class="mask" v-else><Loading></Loading></view>
				</view>
			</view>
		</view>
		<view class="tui-ptop"><tui-button type="primary" shadow height="88rpx" @click="submit">留言</tui-button></view>
		<Loading type="img" v-if="loading"></Loading>
	</view>
</template>

<script>
import form from '@/utils/validation.js';
import { createleaveword } from '@/service/mine.js';
import { uploadImg } from '@/service/upload.js';
export default {
	computed: {
		descNum: function() {
			return this.desc.length;
		}
	},
	data() {
		return {
			loading: false,
			imgUrl: '',
			desc: '',
			email: '',
			btnType: 'primary'
		};
	},
	methods: {
		deleteHandle() {
			this.imgUrl = '';
		},
		choosePic() {
			uni.chooseImage({
				count: 1,
				sizeType: 'original',
				success: async ({ tempFilePaths, tempFiles }) => {
					try {
						this.loading = true;
						const resp = await uploadImg(tempFilePaths[0], { loading: true });
						this.imgUrl = resp;
					} catch (e) {
						//TODO handle the exception
					} finally {
						this.loading = false;
					}
				}
			});
		},
		showPic() {
			uni.previewImage({
				urls: [this.imgUrl],
				current: 0
			});
		},
		async submit() {
			let rules = [
				{
					name: 'desc',
					rule: ['required', 'minLength:8', 'maxLength:500'],
					msg: ['请输入问题描述', '问题描述必须8个或以上字符', '问题描述不能超过500个字符']
				}
			];
			let formData = {
				desc: this.desc
			};
			let checkRes = form.validation(formData, rules);
			if (!checkRes) {
				await createleaveword({ leaveWordContent: this.desc, imgUrls: [this.imgUrl] }, { loading: true });
				this.$msg('提交成功');
				setTimeout(v => {
					uni.navigateBack({});
				}, 1000);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #fff;
}

.container {
	background-color: #fff;
	margin-top: 22rpx;
	padding: 30rpx;
	box-sizing: border-box;
	padding-bottom: 162rpx;
}

.title {
	font-size: 30rpx;
	color: #666;
	padding-bottom: 32rpx;
}

.tui-cells {
	border: 1rpx solid #e6e6e6;
	border-radius: 4rpx;
	height: 280rpx;
	box-sizing: border-box;
	padding: 20rpx 20rpx 0 20rpx;
}

.tui-textarea {
	height: 210rpx;
	width: 100%;
	color: #666;
	font-size: 28rpx;
}

.pholder {
	color: #ccc;
}

.textarea-counter {
	font-size: 24rpx;
	color: #999;
	text-align: right;
	height: 40rpx;
	line-height: 40rpx;
	padding-top: 4rpx;
}

.top64 {
	margin-top: 64rpx;
}

.tui-input {
	font-size: 30rpx;
	height: 88rpx;
	border: 1rpx solid #e6e6e6;
	border-radius: 4rpx;
	padding: 0 25rpx;
	box-sizing: border-box;
}
.tui-ptop {
	padding-top: 80rpx;
}
.feedback-img {
	display: flex;
	padding-top: 30upx;
	border-top: 1upx solid #f5f5f5;
	flex-wrap: wrap;
	padding-left: 30rpx;
	width: 750upx;
}
.img-item {
	display: flex;
	position: relative;
	padding: 0upx 10upx 0 0;
	margin-right: 11upx;
	margin-bottom: 30upx;
	width: 168upx;
}
.img-item .img {
	width: 157upx;
	height: 157upx;
}
.img-item .del {
	width: 40upx;
	height: 40upx;
	position: absolute;
	top: -10upx;
	right: 0;
}
.img-item .mask {
	display: flex;
	width: 157upx;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
}
.img-item .mask progress {
	color: #ffffff;
}
.img-icon {
	width: 158upx;
	height: 158upx;
	margin-right: 11upx;
	box-sizing: content-box;
	margin-bottom: 30upx;
}
.feedback-imgtips {
	width: 690upx;
	margin-top: 5upx;
	margin-bottom: 59upx;
}
.feedback-imgtips text {
	width: 100%;
	font-size: 26upx;
	color: #a9b6c7;
	line-height: 50upx;
	margin-top: 5upx;
}
.feedback-submit text {
	width: 690upx;
	height: 90upx;
	border-radius: 6upx;
	color: #ffffff;
	text-align: center;
	line-height: 90upx;
	font-size: 30upx;
}
.tui-btn-primary {
	background-color: $primary !important;
}
</style>
